<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑话生成</title>
</head>
<body>
        <div>
            <label for="customname">输入自定义名字：</label>
            <input id="customname" type="text" placeholder="李雷" />
        </div>
        <div>
            <label for="metric">公制</label>
            <input id="metric" type="radio" name="measure" value="metric" checked />
            <label for="american">美制</label>
            <input id="american" type="radio" name="measure" value="american" />
        </div>
        <div>
            <button class="randomize">生成随机笑话</button>
        </div>
        <p class="story"></p>

    <script>
        const customName = document.getElementById('customname');
        const american = document.getElementById('american');// 此处美制(华氏度){默认是公制(华氏度)}
        const randomize = document.querySelector('.randomize');// 按钮"randomize"
        const story = document.querySelector('.story');// 标签p"story"
        function randomValueFromArray(array) {
        const random = Math.floor(Math.random() * array.length);
        return array[random];
        }
        
        let storyText = `今天气温 35 摄氏度，:insertx:出门散步。
        当走到:inserty:门前时，突然就:insertz:。
        人们都惊呆了，李雷全程目睹但并没有慌，
        因为:insertx:是一个 140 公斤的胖子，天气又辣么热。`;// 设定一段默认笑话格式，后续将替换:insertX:字符
        let insertX = ['怪兽威利', '大老爹', '圣诞老人'];
        let insertY = ['肯德基', '迪士尼乐园', '白宫'];
        let insertZ = ['自燃了', '在人行道化成了一坨泥', '变成一只鼻涕虫爬走了'];
        randomize.addEventListener('click', result);// 给按钮randomize增加监听器
        function result() {
            let newStory = storyText;// 定义数组newStory封装默认笑话格式storyText
            // 在三个数组中随机取一个值
            let xItem = randomValueFromArray(insertX);
            let yItem = randomValueFromArray(insertY);
            let zItem = randomValueFromArray(insertZ);
            // 将随机取的值替换默认笑话中对应字符
            newStory = newStory.replace(':insertx:', xItem);
            newStory = newStory.replace(':inserty:', yItem);
            newStory = newStory.replace(':insertz:', zItem);
            //添加此行对应姓名
            newStory = newStory.replace(':insertx:', xItem);
            // 若输入姓名为空，设置默认姓名为李雷
            if (customName.value !== '') {
                const name = customName.value;
                newStory = newStory.replace('李雷', name);
            }
            if(american.checked){
                // 若监听radio选择为american,将对应字符按照单位值替换
                const weight = Math.round(140 * 2.20462) + ' 磅';
                const temperature = Math.round(35 * 9 / 5 + 32) + ' 华氏度';
                newStory = newStory.replace('35 摄氏度', temperature);
                newStory = newStory.replace('140 公斤', weight);
            }
            // 将生成后的笑话从newStory返回story，并设置可见
            story.textContent = newStory;
            story.style.visibility = 'visible';
        }
        </script>
</body>
</html>